<template>
    <div class="demo3">
        <div class="demo3-header">
            <span class="header-info">三、input元素实现多文件上传</span>
        </div>
        <div class="demo3-content">
            <div class="content-core">
                <!-- 注:input标签中添加上 'multiple' 属性可以选择多个文件 -->
                <input type="file" multiple @change="fileSelectChange">
            </div>
            <div class="conten-tip">
                上传进度:
                <el-progress :percentage="percent"></el-progress>
            </div>
            <div class="content-info">
                <el-button type="success" @click="fileUploadByBlob">发送多个请求:处理成formData</el-button>
                <el-button type="info" @click="fileUploadByBase64">发送多个请求:处理成Base64编码</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import { reqFileUploadByBlob, reqFileUploadByBase64 } from "@/api/fileUpload.js";
export default{
    name:"demo3",
    data:()=>{
        return {
            selectFileList:[],  //选择的文件类数组
            fileDataByFormData:null,  //构建的formData对象
            fileDataByFileBase64:null,  //文件base64编码方式
            fileName:"",  //文件名
            percent:0,  //进度百分比
        }
    },
    methods:{
        /**
         * 前端给后端发送文件两张传输方式:二进制blob传输、base64传输
         * 
         */
        //文件选择事件
        fileSelectChange(event){
            this.selectFileList = event.target.files;  //获取到选择的类文件数组
        },
        //发送请求1(formData <---> Blob)
        async fileUploadByBlob(){
            //1.准备FormData实例对象
            const formData = new FormData();
            //2.遍历文件类数组对象,并添加到FormData实例对象载体上
            for(let i = 0; i < this.selectFileList.length; i++){
                //File对象的实例
                let file = this.selectFileList[i];
                //将文件添加进去 append("文件名","文件实例");
                formData.append("multipartFile",file);
            }
            //3.发送请求
            let res = await reqFileUploadByBlob(formData);

            //4.打印结果
            console.log(res);
            alert(JSON.stringify(res));  //弹窗
        },
        //发送请求2(FileReader <---> Base64)
        async fileUploadByBase64 () {
            //1.遍历文件类数组对象
            //2.准备FileReader对象，对文件进行读取
            const fileReader = new FileReader();
            //文件base64编码数组
            let fileBase64List = [];

            //功能函数：读取文件并转为base64,for循环中执行异步语句只能作此处理
            function delFileToBase64(file){
                return new Promise((resolve,reject)=> {
                    fileReader.readAsDataURL(file);  //读文件
                    let fileBase64 = "";
                    //读取并转化完毕：异步
                    fileReader.onload = () => {
                        fileBase64 = fileReader.result;

                        //添加
                        fileBase64List.push({fileName:file.name,fileBase64:fileBase64.slice(fileBase64.indexOf(",") + 1)});

                        //调用成功解决方法
                        resolve(fileBase64);
                    }
                })
            }
            //遍历
            for(let i = 0; i < this.selectFileList.length; i++){
                let file = this.selectFileList[i];
                await delFileToBase64(file);
            }
            //3.发送请求
            let res = await reqFileUploadByBase64(fileBase64List);
            //4.打印输出
            console.log(res);
            alert(JSON.stringify(res));  //弹窗
        }
    }
}
</script>

<style scoped>
.demo3{
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.demo3-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
    color: blue;
}
.content-core{
    margin-bottom: 50px;
}
.content-info{
    margin: 100px 0;
}
</style>